<template>
  <br />
  <!-- {{ student.student2.no22 }} -->
  {{ student.no12 }}
  <button @click="addage">AddMyage</button>
</template>
<script lang="ts">
// https://www.cnblogs.com/yingliyu/p/14267394.html
import { toRefs } from "vue";
export default {
  setup() {
    const data = {
      name: "szq",
      age: 11,
      student: {
        no11: "11",
        no12: 22,
        student2: { no21: "33", no22: 44 },
      },
    };
    const addage = () => {
      mydata.student.value.no12++;
      console.log(mydata.student.value.no12);
    };

    const mydata = toRefs(data);

    return { ...mydata, addage };

    // return { state, ...stateAsRefs, foo1, bar1 };

    // 对响应式对象进行 toRefs 后，可以对其进行解构方便 vue 模版使用，但是不会使其失去响应性。
  },
};
</script>
